<!--
 * @Author: 明月下
 * @Date: 2022-09-20 20:44:08
 * @LastEditors: 明月下
 * @LastEditTime: 2022-09-21 00:07:40
 * @FilePath: \minesweeper\src\components\GridItem.vue
 * @Description:
-->
<script setup lang="ts">
import { ref, toRefs } from "@vue/reactivity"
// 传递事件
const emit = defineEmits(['flag', 'open', 'openAll'])
// 地雷渲染
const props = defineProps({
    // count: Number,
    // isBoob: Boolean
    item : Number
})
const { item } = toRefs(props)
// 左键事件
const isOpen = ref(false)
const onClick = () => {
    open()
}
const open = () => {
    if(isOpen.value || isFlag.value) {
        return
    }
    isOpen.value = true
    emit('open')
}
// 右键事件
const isFlag = ref(false)
const onRightClick = (event: any) => {
    event.preventDefault()
    if(isOpen.value) {
        return
    }
    isFlag.value = !isFlag.value
    emit('flag', isFlag.value)
}
// 双键事件
const onDubleClick = (event:any) => {
    event.preventDefault()
    if(!isOpen.value) {
        return
    }
    emit('openAll')
}
// 重置样式
const reset = () => {
    isOpen.value = false
    isFlag.value = false
}

defineExpose({
    reset,
    open,
    isFlag
})
</script>

<template>
    <div class="grid-item" :class="{'opened': isOpen}" @click="onClick" @contextmenu="onRightClick" @dblclick="onDubleClick">
        <template v-if="isFlag">🚩</template>
        <template v-else-if="isOpen">
            <template v-if="item && item >= 9">💣</template>
            <template v-else>{{ item ? item: '' }}</template>
        </template>
    </div>
</template>

<style scoped>
.grid-item {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #ccc;
  border: 1px solid;
  border-top-color: #f0f0f0;
  border-left-color: #f0f0f0;
  border-right-color: #666666;
  border-bottom-color: #666666;
  user-select: none;
}
.grid-item.opened {
  background-color: #fff;
  border: 1px solid #ccc;
}
</style>